<template>
    <div class="layout-container">
        <div class="layout-container-form">
            <div class="layout-container-form-handle" />

            <div class="layout-container-form-search">
                <div>
                    <el-input v-model="page.po.gardenId" placeholder="工作Id" clearable />
                </div>

                <div>
                    <el-button type="primary" :icon="Search" @click="getTableData">搜索</el-button>
                </div>
            </div>
        </div>

        <div class="layout-container-table">
            <Table ref="table" v-model:page="page" v-loading="loading" :data="tableData" @getTableData="getTableData" stripe @selection-change="handleSelectionChange">
                <el-table-column type="selection" />

                <el-table-column prop="id" label="id" align="left" width="200" />

                <el-table-column prop="siteId" label="站点id" align="left" width="80" />

                <el-table-column prop="userId" label="用户id" align="left" width="100" />

                <el-table-column prop="userName" label="用户名" align="left" width="150" />

                <el-table-column prop="content" label="评论" align="left" />

                <el-table-column prop="date" label="时间" align="left" :formatter="(row)=>row.date?moment(row.date).format('YYYY-MM-DD'):''" width="100"/>
            </Table>
        </div>
    </div>
</template>

<script setup lang="ts">
import {onActivated, reactive, ref} from 'vue'
import Table                        from '@/components/table/index.vue'
import {Search}                     from '@element-plus/icons-vue'
import router                       from "@/router";
import {page as getPage}            from "@/api/comment";
import moment                       from "moment/moment";


const loading   = ref(true)
const tableData = ref([])

interface PageInterface {
    current: any,
    size: any,
    total: any,
    po: any,
}

// 分页参数, 供table使用
const page: PageInterface = reactive({
    current: 1,
    size   : 20,
    total  : 0,
    po     : {
        gardenId: null,
    },
})

/**
 * 获取表格数据
 * @author mbb
 */
const getTableData = () => {
    loading.value = true

    let pageQuery = Object.assign({}, page)
    delete pageQuery.total
    getPage(pageQuery).then(res => {
        tableData.value = res.data.records
        page.current    = res.data.current
        page.total      = res.data.total
    }).finally(() => {
        loading.value = false
    })
}

// 选择项
const selectedList = ref([])

/**
 * 调整选中
 */
function handleSelectionChange(list: any) {
    selectedList.value = list
}

/**
 * 初始化参数
 */
function initParam() {
    page.po.gardenId = router.currentRoute.value.query.gardenId || null
}

// -----------------------------主程序start-----------------------------------------
onActivated(() => {
    initParam()
    getTableData()
})
// -----------------------------主程序end-----------------------------------------

</script>
